<template>

<div class="school">
    <div class="box-card">
       <!-- <div  class="title"  @click="toggleOpen">
            <span>对高校科研实验室安全工作建议</span>
            <i v-if="progress==='1'"><el-tag type="success">已完善</el-tag></i>
            <i v-if="progress==='0'"><el-tag type="danger">待完善</el-tag></i>
            <div class="head-right">
                <el-button type="text" @click="submit" v-if="!disabled">保存</el-button>
                <span class="toggle" @click="toggleOpen">
                    <i class="el-icon-arrow-up" v-if="open"></i>
                    <i class="el-icon-arrow-down"  v-else></i>
                </span>

            </div>
        </div>-->
        <item-header
                title="对高校科研实验室安全工作建议"
                :open="open"
                :progress="progress"
                :disabled="disabled"
                @submit="submit"
                @toggleOpen="toggleOpen"
                @changeDisabled="changeDisabled"
        />
        <div class="text item" v-if="open">
            <el-form :inline="true" :rules="rules" ref="form" :model="data.college_info" label-width="140px">

                <el-form-item label="" prop="note">
                    <el-input rows="10" v-model="data.college_info.note" placeholder="请输入建议内容，多项内容请加入序号1.2.3……" type="textarea" :disabled="disabled" style="width:800px">

                    </el-input>
                </el-form-item>




            </el-form>
        </div>
    </div>

</div>


</template>

<script>
    import itemHeader from './item-header'
    export default {
        components:{itemHeader},
        name: "item1",
        props:['formUnit', 'is_disabled','expend'],
        computed:{
            progress(){

                return this.data.college_info.progress[this.index]
            }
        },
        watch: {
            formUnit(val) {
                this.data = this.formUnit;
            }
        },
        data(){
            return {
                disabled:this.is_disabled,
                complete:false,
                // data:this.formUnit,
                data:JSON.parse(JSON.stringify(this.formUnit)),
                open:this.expend,
                index:11,
                rules: {
                    "note": [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    accident_param2: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    accident_param3: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    accident_param4: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    accident_param5: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    accident_param6: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    accident_param7: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    accident_param8: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    accident_param9: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    accident_param10: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    accident_param11: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    accident_param12: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    accident_param13: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    accident_param14: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ]
                },
            }
        },
        methods:{
            addItem(){

                this.data.college_info.accident_param1_list.push({value:''})
            },
            removeItem(item) {
                var index = this.data.college_info.accident_param1_list.indexOf(item)
                if (index !== -1) {
                    this.data.college_info.accident_param1_list.splice(index, 1)
                }
            },
            toggleOpen(){
                this.open = !this.open
            },
            changeDisabled(val){
                if (val){
                    this.data =  JSON.parse(JSON.stringify(this.formUnit))
                }
                this.disabled = val
            },
            submit(e){
                window.event? window.event.cancelBubble = true : e.stopPropagation()
                this.$refs['form'].validate((valid) => {
                    if (valid) {

                        this.$emit('itemSave',this.data,this.index)
                        this.disabled = true


                    }
                })
            }
        }
    }
</script>

<style scoped>
    .tit{
        margin-bottom: 20px;
    }
    .toggle{
        cursor: pointer;
        display:inline-block;
    }
    .title .toggle i{
        font-size:20px;
        margin-left:0px;
    }
    .title{
        background: #eee;
        padding:0 20px;
        position:relative;
        margin-bottom:30px;
        cursor: pointer;
    }
    .title:hover{
        background: #e6e6e6;

    }
    .title i{
        font-size:12px;
        margin-left:20px;
        font-style: normal;
        color:#999;
    }
    .title .head-right{
        position:absolute;
        right:20px;
        top:1px;
    }
</style>
